<template>
	<div class="demo">
		<h2>学校名称：{{ name }}</h2>
		<h2>学校地址：{{ address }}</h2>
		<button @click="showName">点我提示学校名</button>
		<button @click="toSubject">跳转到subject</button>
		<!-- 嵌套跳转 -->
		<ul class="nav nav-tabs">
			<li><router-link class="list-group-item" active-class="active" to="/school/student">嵌套
					跳转到student</router-link></li>
		</ul>
		<div class="student">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
export default {
	name: 'SchoolDemo',
	data() {
		return {
			name: '尚硅谷',
			address: '北京昌平'
		}
	},
	methods: {
		showName() {
			alert(this.name)
		},
		toSubject() {
			this.$router.push({//如果第一次和第二次跳转的地址和参数都是一样，那么会报错
				name: 'subjectDetail',
				query: {//第一种使用query传递数据
					id: 'hajksdakdad',
					name: '来自school 的subject'
				},
				params: {//第二种使用params传递数据
					score: 45
				}
			}).catch(error => {// 跳转失败会执行catch
				console.log(111, error.name)
				if (error.name === 'NavigationDuplicated') {
					console.log('地址参数重复，已阻止冗余导航')
				}
			})
		}
	},
}
</script>

<style>
.demo {
	background-color: orange;
}

.student {
	background-color: aquamarine;
}
</style>